import { Button, Form, Input, message } from 'antd';
import { connect } from 'dva';
import { history } from 'umi';
import NewLogo from '../../assets/images/newLogo2.png';
import { UserOutlined, LockOutlined, PhoneOutlined, MailOutlined } from '@ant-design/icons';
import styles from './index.less';

function RegisterPage(props: any) {
    const { dispatch, loading = false } = props;

    const onFinish = (values: any) => {
        if (values.password !== values.confirmPassword) {
            message.error('两次输入的密码不一致！');
            return;
        }
        console.log('注册表单', values);
        dispatch({
            type: 'login/register',
            payload: {
                ...values,
            },
        });
    };

    return (
        <div className={styles.registerContainer}>
            <div className={styles.registerContent}>
                <div className={styles.leftPanel}>
                    <div className={styles.header}>
                        <img src={NewLogo} alt="logo" className={styles.logo} />
                        <h2>创建新账号</h2>
                        <p>请填写以下信息完成注册</p>
                    </div>
                    <Form
                        name="register"
                        onFinish={onFinish}
                        className={styles.registerForm}
                    >
                        <Form.Item
                            name="username"
                            rules={[
                                { required: true, message: '请输入用户名!' },
                                { min: 4, message: '用户名至少4个字符' }
                            ]}
                        >
                            <Input
                                prefix={<UserOutlined />}
                                placeholder="请输入用户名"
                                size="large"
                            />
                        </Form.Item>
                        <Form.Item
                            name="phone"
                            rules={[
                                { required: true, message: '请输入手机号!' },
                                { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
                            ]}
                        >
                            <Input
                                prefix={<PhoneOutlined />}
                                placeholder="请输入手机号"
                                size="large"
                            />
                        </Form.Item>
                        <Form.Item
                            name="email"
                            rules={[
                                { required: true, message: '请输入邮箱!' },
                                { type: 'email', message: '请输入正确的邮箱格式' }
                            ]}
                        >
                            <Input
                                prefix={<MailOutlined />}
                                placeholder="请输入邮箱"
                                size="large"
                            />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                { required: true, message: '请输入密码!' },
                                { min: 6, message: '密码至少6个字符' }
                            ]}
                        >
                            <Input.Password
                                prefix={<LockOutlined />}
                                placeholder="请输入密码"
                                size="large"
                            />
                        </Form.Item>
                        <Form.Item
                            name="confirmPassword"
                            rules={[
                                { required: true, message: '请确认密码!' },
                                ({ getFieldValue }) => ({
                                    validator(_, value) {
                                        if (!value || getFieldValue('password') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('两次输入的密码不一致!'));
                                    },
                                }),
                            ]}
                        >
                            <Input.Password
                                prefix={<LockOutlined />}
                                placeholder="请确认密码"
                                size="large"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button
                                type="primary"
                                htmlType="submit"
                                loading={loading}
                                block
                                size="large"
                                className={styles.registerButton}
                            >
                                {loading ? '注册中...' : '立即注册'}
                            </Button>
                        </Form.Item>
                        <div className={styles.footer}>
                            <span>已有账号?</span>
                            <Button
                                type="link"
                                onClick={() => history.push('/login')}
                                className={styles.loginBtn}
                            >
                                立即登录
                            </Button>
                        </div>
                    </Form>
                </div>
                <div className={styles.rightPanel}>
                    <div className={styles.circle1} />
                    <div className={styles.circle2} />
                    <div className={styles.circle3} />
                    <div className={styles.gridBackground} />
                    <div className={styles.content}>
                        <h1>升级文件管理系统</h1>
                        <div className={styles.features}>
                            <div className={styles.featureItem}>
                                <div className={styles.featureIcon}>🔒</div>
                                <div className={styles.featureText}>
                                    <h3>安全可靠</h3>
                                    <p>采用先进加密技术</p>
                                </div>
                            </div>
                            <div className={styles.featureItem}>
                                <div className={styles.featureIcon}>⚡</div>
                                <div className={styles.featureText}>
                                    <h3>高效管理</h3>
                                    <p>智能分类与检索</p>
                                </div>
                            </div>
                            <div className={styles.featureItem}>
                                <div className={styles.featureIcon}>🤝</div>
                                <div className={styles.featureText}>
                                    <h3>协同办公</h3>
                                    <p>团队共享与协作</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

function mapStateToProps({
    register = {},
    loading: {
        effects: {
            'register/register': loading = false
        } = {}
    } = {}
}) {
    return {
        ...register,
        loading
    };
}

export default connect(mapStateToProps)(RegisterPage);
